Intro (Project Overview)

0:00

Buying Hosting & Claiming Free Domain on Hostinger

8:43

Installing Node & VSCode

11:38

Assets

12:21

Creating our React App using npx create-react-app

12:56

Managing and Creating files & folders

14:22

Creating all Components

20:15

CSS Variables & General CSS Styles

27:40

Header Component JSX

45:00

Installing React Icons and Using them in our project

52:42

Header Component CSS

56:18

Header Component Responsive Design

1:04:20

Floating Nav Component JSX

1:06:45

Floating Nav Component CSS

1:13:57

Managing Nav States using useState Hook

1:18:00

About Component JSX

1:21:43

About Component CSS

1:28:29

About Component Responsive Design

1:35:15

Experience Component JSX

1:38:45

Experience Component CSS

1:44:17

Experience Component Responsive Design

1:50:40

Services Component JSX

1:53:35

Services Component CSS

1:57:25

Services Component Responsive Design

2:02:35

Portfolio Component JSX

2:04:15

Portfolio Component CSS

2:10:10

Portfolio Component Responsive Design

2:14:45

Generating Portfolio Items from Array using map method

2:16:02

Testimonials Component JSX

2:20:44

Testimonials Component CSS

2:24:03

Testimonials Component Responsive Design

2:29:15

Generating Testimonials from Array using map method

2:30:26

Creating Carousel/Slides using SwiperJS

2:33:40

Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email)

2:40:23

Contact Component CSS

2:51:02

Contact Component Responsive Design

2:57:02

Form Submission using EmailJS

2:58:34

Footer Component JSX

3:07:43

Footer Component CSS

3:11:53

Footer Component Responsive Design

3:16:30

Deploying Our React Website

3:18:50
Sync to video time
leenah iqbal
Public
0/140
30.0 seconds
Continue clipping after ad finishes
Can't create clip while ad is playing
React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website Hostinger Discount: https://www.hostg.xyz/SH8cs Source Code, Assets & Live Demo: https://www.buymeacoffee.com/egator/e... Become a patron: https://patreon.com/egator In this practical react js project tutorial, I'm going to teach you, step-by-step, how to create and deploy a fully responsive personal portfolio website from scratch! By the end of this video, you will know how to create a react app from scratch, how to use the react icons library in your react projects, how to use react useState hooks, how to build modern website designs with CSS3, how to use SwiperJS (to create carousels/slides) in your react projects, how to add multiple contact options on your website (WhatsApp, Facebook Messenger, and Direct form submission using EmailJS), and more! No prior react knowledge is required for this tutorial, as I will be explaining every step along the way. Now Let's Build The Best React Personal Portfolio Website On YouTube! Assets: https://drive.google.com/file/d/18FpI... Timestamps 00:00:00 Intro (Project Overview) 00:08:43 Buying Hosting & Claiming Free Domain on Hostinger 00:11:38 Installing Node & VSCode 00:12:21 Assets 00:12:56 Creating our React App using npx create-react-app 00:14:22 Managing and Creating files & folders 00:20:15 Creating all Components 00:27:40 CSS Variables & General CSS Styles 00:45:00 Header Component JSX 00:52:42 Installing React Icons and Using them in our project 00:56:18 Header Component CSS 01:04:20 Header Component Responsive Design 01:06:45 Floating Nav Component JSX 01:13:57 Floating Nav Component CSS 01:18:00 Managing Nav States using useState Hook 01:21:43 About Component JSX 01:28:29 About Component CSS 01:35:15 About Component Responsive Design 01:38:45 Experience Component JSX 01:44:17 Experience Component CSS 01:50:40 Experience Component Responsive Design 01:53:35 Services Component JSX 01:57:25 Services Component CSS 02:02:35 Services Component Responsive Design 02:04:15 Portfolio Component JSX 02:10:10 Portfolio Component CSS 02:14:45 Portfolio Component Responsive Design 02:16:02 Generating Portfolio Items from Array using map method 02:20:44 Testimonials Component JSX 02:24:03 Testimonials Component CSS 02:29:15 Testimonials Component Responsive Design 02:30:26 Generating Testimonials from Array using map method 02:33:40 Creating Carousel/Slides using SwiperJS 02:40:23 Contact Component JSX (Multiple contact options: Facebook Messenger, WhatsApp & Email) 02:51:02 Contact Component CSS 02:57:02 Contact Component Responsive Design 02:58:34 Form Submission using EmailJS 03:07:43 Footer Component JSX 03:11:53 Footer Component CSS 03:16:30 Footer Component Responsive Design 03:18:50 Deploying Our React Website #reactjs #reactportfoliowebsite #reactjsprojects
#reactjs #reactportfoliowebsite #reactjsprojects

React Portfolio Website Tutorial From Scratch - Build & Deploy React JS Portfolio Website (2022)

EGATOR
Subscribe
Comments
387
Dinh Van Huu Nghia
Thank you so much for this tutorial, I learn a lots from you. Amazing!!! Please keep making your video!
This was such a pleasure to follow. You explain a lot of the HTML and general structure of the code. Learned a lot about CSS conventions and styling as well. I followed the entire tutorial, and now I'm excited to learn more and build upon this and make it my own. Thank you for the amazing tutorial!
24
Thank you man. Wow, I always wanted to learn front-end development and I definitely learned a lot throughout the whole build!! Thanks to you I built my first site ;) Cheers and thank you for all the effort that you are putting in your videos. Simply awesome brother <3
You're amazing just I wanted to say. Your file structure, way of teaching the concepts are really as good as a professional instructor's even better all of them. Thank you
5
I love the fact that you actually talk while you code, unlike some videos doing speed runs with crazy music in the background. Thank you so much!
47
Well I can't thank you enough. My version of this sleek, modern portfolio site is up and running. This is a big milestone for me and likely every future-dev out there. I won't forget who helped along the way. My hats is off sir.
10
Extremely helpful especially for react beginners who wants to build a real-world project
1
I really enjoyed this tutorial. You explain in a simple and convenient way and the result is really beautiful Keep up the good work!
2
and the timestamps are on point too! I am really greatfull for the file structure you showed as well.
This is one of the best React/CSS tutorials, I learned a lot and thank you !!
1
This was such a great tutorial. Thank you for teaching me so much!
2
Simple but high impact tutorial. Thank you very much
amazing tutorial, direct to the point, easy to follow. thank you for sharing god bless
3
Thanks so much! I am new to react and after following this tutorial, I understood a lot of things that will help me later on.
Hey that was an amazing tutorial! Keep up the good work
Thanks for this awesome project! Currently at 49:00, and I'm thoroughly enjoying building such a beautiful portfolio website. However, I noticed that you didn't import the index.css file in the Header and CTA component.. but still your components accepted the styles declared in the index.css file. Can you please tell me why is this happening?
2
Thank you very much for the contents you create. It really helped me in learning web development. Keep on creating good and useful contents. I'm waiting for your other interesting contents. Thank you very much. Thank you...
1
I'm a student and I went to one of the companies in Nairobi Kenya to ask for attachment and they said they needed a front end developer with react js skills and after watching this video I had a good ground to react be blessed💪🙌
1
thank you for this amazing tutortial and also thank you for splitting in chapters because now i can do 5 chapters a day and than practice those 5 chapters until next day Upadate: Don't copy CSS step by step it might not go same for every screen. like i have wide screen and some of the css stylization didn't got things right so i had to change some parameters
5
Thank you so much . I learned and created my own portfolio website all because of you.
1
Hi, nice to meet you. I am fascinated with this incredible tutorial and the final result of this great project, is really incredible, also the way you explain in detail is great, I am following step by step the video, however I have a problem. I added to the html tag, the attribute scroll-behavior: smooth; however it does not take the effect at the time of selecting the icons of the navagacion, skipping directly. I would like to know what I can do in that case and if you could give me a solution to this small inconvenience. Thank you very much.